<template>
  <div class="page hinge">
    <div class="map">
      <HingeMap />
    </div>
    <div class="content-block">
      <div class="content-item">
        <div class="title">大巡防体系机制</div>
        <div class="text-item">
          <div class="text-title">1、统一编组联勤</div>
          <div class="text">市区特警、交警、油田分局、肃州分局机动警力混合编组</div>
        </div>
        <div class="text-item">
          <div class="text-title">2、动态勤务模式</div>
          <div class="text">“有警出警，无警巡逻”的弹性工作机制</div>
        </div>
        <div class="text-item">
          <div class="text-title">3、快速反应网络</div>
          <div class="text">建立5分钟快速反应圈、覆盖主城区</div>
        </div>
        <div class="sub-title">联动单位</div>
        <div class="label-block">
          <div class="label-item">
            <img src="@/assets/images/label-icon-1.png" class="label-icon">特警突击组
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-2.png" class="label-icon">交警疏导组
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-3.png" class="label-icon">治安管控组
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-4.png" class="label-icon">应急处突组
          </div>
        </div>
<!--        <div class="btn">播放视频案例</div>-->
        <!-- <div class="btn" @click="dialog2.show=true">播放视频案例</div> -->
      </div>
      <div class="content-item">
        <div class="title">协同作战体系</div>
        <div class="text-item">
          <div class="text-title">1、线上任务发起</div>
          <div class="text">通过警务协同平台发起任务请求，自动推送至相关警钟</div>
        </div>
        <div class="text-item">
          <div class="text-title">2、情指中心统筹</div>
          <div class="text">指挥中心实时研判，调度最近警力资源多维支撑响应</div>
        </div>
        <div class="text-item">
          <div class="text-title">3、多维支撑响应</div>
          <div class="text">网安、技侦、情指、交警、警保、法治多警种部门提供支持</div>
        </div>
        <div class="sub-title">支撑技术</div>
        <div class="label-block">
          <div class="label-item">
            <img src="@/assets/images/label-icon-5.png" class="label-icon">警务群组
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-6.png" class="label-icon">移动警务终端
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-6.png" class="label-icon">无人机+
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-7.png" class="label-icon">视频巡查
          </div>
          <div class="label-item">
            <img src="@/assets/images/label-icon-8.png" class="label-icon">数据中台
          </div>
          
        </div>
        <div class="btn" @click="dialog.show=true">播放视频事例</div>
      </div>
      <div class="content-item">
        <div class="title">体系作战效能</div>
        <div class="number-block">
          <div class="icon-text">协同警务作战体系有效解决了传统警务中信息孤岛、协同低效、资源分散、响应滞后及打击碎片化等问题，通过打破壁垒、整合资源、扁平指挥与数据共享，
            实现跨警种高效联动、合成作战，有效提升了复杂警情、突发事件、群体性事件与精准打击能力。</div>
<!--          <div class="number-item">-->
<!--            <div class="value">92%</div>-->
<!--            <div class="text">任务协同效率</div>-->
<!--          </div>-->
<!--          <div class="number-item">-->
<!--            <div class="value">78%↓</div>-->
<!--            <div class="text">单警作战率</div>-->
<!--          </div>-->
<!--          <div class="number-item">-->
<!--            <div class="value">63%↑</div>-->
<!--            <div class="text">处置效率</div>-->
<!--          </div>-->
<!--          <div class="number-item">-->
<!--            <div class="value">100%</div>-->
<!--            <div class="text">支援到达率</div>-->
<!--          </div>-->
        </div>
        <div class="icon-title">
          <img src="@/assets/images/title-icon-1.png" class="icon">
          <div class="title">情报先导</div>
        </div>
        <div class="icon-text">建立警情预判机制，提前部署力量</div>
        <div class="icon-title">
          <img src="@/assets/images/title-icon-2.png" class="icon">
          <div class="title">闭环管理</div>
        </div>
        <div class="icon-text">从接警到反馈的全流程跟踪督导</div>
        <div class="desc">
          <div class="desc-title">体系作战优势</div>
          <div class="desc-content">避免民警与“一无所知的对手作战”，消除“孤立无援的状态作战”</div>
        </div>
      </div>
    </div>
    <Dialog v-if="dialog.show" :info="dialog">
      <video style="width: 100%" src="https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/D6BDB779-0747-5008-909C-2869E19EE7F9.mp4" autoplay loop></video>
    </Dialog>
    <Dialog v-if="dialog2.show" :info="dialog2">
      <video style="width: 100%" src="https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang%2Fvideo2.mp4" autoplay loop></video>
    </Dialog>
  </div>
</template>
<script>

import HingeMap from "@/components/Hinge/HingeMap.vue";
import Dialog from "@/components/Dialog.vue";

export default {
  components: {Dialog, HingeMap},
  data() {
    return {
      showDialog: false,
      dialog: {
        show: false,
        width: '900px',
        title: '播放视频案例'
      },
      dialog2: {
        show: false,
        width: '1210px',
        title: '播放视频案例'
      }
    }
  }

}
</script>
<style lang="scss" scoped>
.page.hinge{
  display: flex;
  align-items: center;
  justify-content: center;

  .map{
    width: 100vw;
    height:100vh;
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
  }
  .content-block{
    width: 80%;
    height: 650px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    .content-item{
      width: calc(100%/3 - 30px);
      padding: 20px;
      height: 100%;
      border-radius: 20px;
      background: rgba(4, 16, 34, 0.7);
      backdrop-filter: blur(5px);
      .title{
        font-family: 冷酷体;
        color: $fontColorSecondary;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .text-item{
        padding: 18px 10px;
        background: rgba(34, 223, 233, 0.1);
        margin-bottom: 25px;
        .text-title{
          font-family: 冷酷体;
          color: $fontColorMain;
          margin-bottom: 10px;
        }
        .text{
          color: #fff;
        }
      }
      .sub-title{
        font-family: 冷酷体;
        color: $fontColorMain;
        margin-bottom: 15px;
      }
      .label-block{
        display: flex;
        flex-wrap: wrap;
        .label-item{
          display: flex;
          align-items: center;
          padding: 5px 10px;
          background: rgba(34, 223, 233, 0.1);
          border-radius: 5px;
          margin-right: 10px;
          margin-bottom: 10px;
          color: $fontColorMain;
          font-size: 14px;
          .label-icon{
            width: 20px;
            margin-right: 10px;
          }
        }
      }
      .btn{
        width: 170px;
        height: 45px;
        border: 1px solid $fontColorMain;
        color: $fontColorMain;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        margin: 0 auto;
        margin-top: 30px;
        background: rgba(34, 223, 233, 0.1);
        cursor: pointer;
        font-family: 冷酷体;
      }
    }
    .content-item:nth-child(3){
      .number-block{
        width: 100%;
        height: 120px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 30px;
        .number-item{
          width: calc(50% - 10px);
          height: calc(50% - 10px);
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: rgba(34, 223, 233, 0.1);
          .value{
            color: $fontColorMain;
            font-family: 冷酷体;
            font-size: 28px;
            margin-bottom: 10px;
          }
          .text{
            color: #fff;
          }
        }
      }
      .icon-title{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .icon{
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
        .title{
          color: $fontColorMain;
          font-family: 冷酷体;
          font-size: 16px;
          margin-bottom: 0;
        }
      }
      .icon-text{
        color: #fff;
        margin-bottom: 30px;
        text-indent: 30px;
      }
      .desc{
        width: 100%;
        height: 120px;
        padding: 0 20px;
        background: rgba(34, 223, 233, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 60px;
        .desc-title{
          color: $fontColorMain;
          font-family: 冷酷体;
        }
        .desc-content{
          color: #fff;
          font-size: 14px;
          margin-top: 10px;
          line-height: 28px;
        }
      }
    }
  }
}
</style>
